<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>时间线</title>
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="stylesheet" href="../../plugin/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="../../plugin/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="../../plugin/Ionicons/css/ionicons.min.css">
  <link rel="stylesheet" href="../../adminlte/css/AdminLTE.min.css">
  <link rel="stylesheet" href="../../adminlte/css/skins/all-skins.min.css">
  <link rel="stylesheet" href="../../system/css/common.css">

  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body class="hold-transition gray-bg sidebar-mini">
<div class="wrapper">
  <section class="content">
    <!-- row -->
    <div class="row">
      <div class="col-md-12">
        <!-- The time line -->
        <ul class="timeline">
          <!-- timeline time label -->
          <li class="time-label">
			<span class="bg-red">
				2021年2月5日
			</span>
          </li>
          <!-- /.timeline-label -->
          <!-- timeline item -->
          <li>
            <i class="fa fa-envelope bg-blue"></i>
            <div class="timeline-item">
              <span class="time"><i class="fa fa-clock-o"></i> 12:05</span>
              <h3 class="timeline-header"><a href="#">团队</a> 发你一封邮件</h3>
              <div class="timeline-body">
                邮件内容输入下...
              </div>
              <div class="timeline-footer">
                <a class="btn btn-primary btn-xs">查看更多</a>
                <a class="btn btn-danger btn-xs">删除</a>
              </div>
            </div>
          </li>
          <!-- END timeline item -->
          <!-- timeline item -->
          <li>
            <i class="fa fa-user bg-aqua"></i>
            <div class="timeline-item">
              <span class="time"><i class="fa fa-clock-o"></i> 5 分钟以前</span>
              <h3 class="timeline-header no-border"><a href="#">唐三</a> 接受了你的好友请求</h3>
            </div>
          </li>
          <!-- END timeline item -->
          <!-- timeline item -->
          <li>
            <i class="fa fa-comments bg-yellow"></i>
            <div class="timeline-item">
              <span class="time"><i class="fa fa-clock-o"></i> 27 分钟以前</span>
              <h3 class="timeline-header"><a href="#">小舞</a> 对你发布的帖子发表了评论</h3>
              <div class="timeline-body">
                评论内容如下
              </div>
              <div class="timeline-footer">
                <a class="btn btn-warning btn-flat btn-xs">查看评论</a>
              </div>
            </div>
          </li>
          <!-- END timeline item -->
          <!-- timeline time label -->
          <li class="time-label">
			<span class="bg-green">
				2021年3月1日
			</span>
          </li>
          <!-- /.timeline-label -->
          <!-- timeline item -->
          <li>
            <i class="fa fa-camera bg-purple"></i>
            <div class="timeline-item">
              <span class="time"><i class="fa fa-clock-o"></i> 2 天前</span>
              <h3 class="timeline-header"><a href="#">朱竹清</a> 上传了一张照片</h3>
              <div class="timeline-body">
                <img src="https://portrait.gitee.com/uploads/avatars/user/315/947463_liyucc_1630835359.png" alt="..." class="margin">
                <img src="https://portrait.gitee.com/uploads/avatars/user/315/947463_liyucc_1630835359.png" alt="..." class="margin">
                <img src="https://portrait.gitee.com/uploads/avatars/user/315/947463_liyucc_1630835359.png" alt="..." class="margin">
              </div>
            </div>
          </li>
          <!-- END timeline item -->
          <!-- timeline item -->
          <li>
            <i class="fa fa-video-camera bg-maroon"></i>
            <div class="timeline-item">
              <span class="time"><i class="fa fa-clock-o"></i> 5 天前</span>
              <h3 class="timeline-header"><a href="#">戴沐白</a> 分享了一段视频</h3>
              <div class="timeline-body">
                <div class="embed-responsive embed-responsive-16by9">
					视频内容如下
                </div>
              </div>
              <div class="timeline-footer">
                <a href="#" class="btn btn-xs bg-maroon">查看</a>
              </div>
            </div>
          </li>
          <!-- END timeline item -->
          <li>
            <i class="fa fa-clock-o bg-gray"></i>
          </li>
        </ul>
      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->

    <div class="row" style="margin-top: 10px;">
      <div class="col-md-12">
        <div class="box box-primary">
          <div class="box-header">
            <h3 class="box-title"><i class="fa fa-code"></i> Timeline Markup</h3>
          </div>
          <div class="box-body">
                <pre style="font-weight: 600;">
&lt;ul class="timeline">

  &lt;!-- timeline time label -->
  &lt;li class="time-label">
      &lt;span class="bg-red">
          10 Feb. 2014
      &lt;/span>
  &lt;/li>
  &lt;!-- /.timeline-label -->

  &lt;!-- timeline item -->
  &lt;li>
      &lt;!-- timeline icon -->
      &lt;i class="fa fa-envelope bg-blue">&lt;/i>
      &lt;div class="timeline-item">
          &lt;span class="time">&lt;i class="fa fa-clock-o">&lt;/i> 12:05&lt;/span>

          &lt;h3 class="timeline-header">&lt;a href="#">Support Team&lt;/a> ...&lt;/h3>

          &lt;div class="timeline-body">
              ...
              Content goes here
          &lt;/div>

          &lt;div class="timeline-footer">
              &lt;a class="btn btn-primary btn-xs">...&lt;/a>
          &lt;/div>
      &lt;/div>
  &lt;/li>
  &lt;!-- END timeline item -->

  ...

&lt;/ul>
                </pre>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->
      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->

  </section>

  <div class="control-sidebar-bg"></div>
</div>

<script src="../../plugin/jquery/jquery.min.js"></script>
<script src="../../plugin/bootstrap/js/bootstrap.min.js"></script>
<script src="../../plugin/fastclick/fastclick.js"></script>
<script src="../../adminlte/js/adminlte.min.js"></script>
</body>
</html>
